<template>
  <view class="wanl-list">
    <!-- 导航条 -->
    <view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
      <view
        class="cu-bar bg-bgcolor fixed"
        :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px' }"
      >
        <view class="action" @tap="$wanlshop.back(1)">
          <text class="wlIcon-fanhui1"></text>
        </view>
        <view class="search-form round" @tap="search()">
          <text class="wlIcon-sousuo1 text-bold"></text>
          <view class="searchinfo cu-tag round" v-if="category">
            <text>类目:{{ category }}</text>
            <text class="wlIcon-shanchu2"></text>
          </view>
          <view class="searchinfo cu-tag round text-df" v-else-if="params.search">
            <text>{{ params.search }}</text>
            <text class="wlIcon-shanchu2"></text>
          </view>
          <view v-else>搜索</view>
        </view>
        <view class="action" @tap="editListstyle()">
          <text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-20'"></text>
          <text class="wlIcon-liebiao" v-else></text>
        </view>
      </view>
    </view>
    <view class="head" :class="{ headtop: scrollStype }" :style="pageIndex === 1 ? 'height: 80rpx' : ''">
      <view class="cue">
        <view>
          <view class="bar" style="justify-content: space-around">
            <view class="item" :class="{ current: pageIndex === 0 }" @tap="pageSwitch(0)">商品</view>
            <view class="item" :class="{ current: pageIndex === 1 }" @tap="pageSwitch(1)">店铺</view>
          </view>
        </view>
        <view v-if="pageIndex === 0">
          <view class="bar">
            <view class="item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">综合</view>
            <view class="item" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">销量</view>
            <view class="item" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">新上架</view>
            <view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
              <text>价格</text>
              <view class="box">
                <text :class="{ active: priceOrder === 1 && filterIndex === 3 }" class="wlIcon-sheng"></text>
                <text :class="{ active: priceOrder === 2 && filterIndex === 3 }" class="wlIcon-jiang"></text>
              </view>
            </view>
            <view class="item" @tap="showDrawer()">
              筛选
              <text class="wlIcon-shaixuan margin-left-xs"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 主体 -->
    <block v-if="pageIndex === 0">
      <block v-if="goodsData.length > 0">
        <wanl-product :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType" />
      </block>
      <block v-if="goodsData.length === 0 && status !== 'loading'">
        <wanl-empty :text="empty" />
        <wanl-divider width="60%">猜你喜欢</wanl-divider>
        <wanl-product :dataList="likeData" />
      </block>
    </block>
    <!-- 店铺搜索 -->
    <block v-else>
      <block v-if="shopData.length > 0">
        <view class="shop" v-for="(item, index) in shopData" :key="index">
          <view class="shop__info">
            <image class="shop__info__avatar" :src="$wanlshop.oss(item.avatar, 50, 50)"></image>
            <view class="shop__info__middle">
              <view class="shop__info__name">
                {{ item.shopname }}
                <view class="shop__info__type">{{
                  item.isself === 1 ? '自营' : ['个人店铺', '企业店铺', '旗舰店'][item.state]
                }}</view>
              </view>
              <view class="shop__info__fans">粉丝数 {{ item.find_user.fans }}</view>
            </view>
            <view class="shop__enter" @tap="handleShop(item.id)">进店</view>
          </view>
          <view class="shop__images">
            <view
              class="shop__goods"
              v-for="(goods, index) in item.good_list"
              :key="index"
              @tap="handleGoods(goods.id)"
            >
              <image class="shop__goods__image" :src="$wanlshop.oss(goods.image, 300, 300)"></image>
              <view class="shop__goods__price">￥{{ goods.price }}</view>
            </view>
          </view>
        </view>
      </block>
      <block v-if="shopData.length === 0 && shopStatus !== 'loading'">
        <wanl-empty :text="empty" />
        <wanl-divider width="60%">猜你喜欢</wanl-divider>
        <wanl-product :dataList="likeData" />
      </block>
    </block>
    <uni-load-more :status="status" :content-text="contentText" />
    <uni-drawer :visible="showRight" mode="right" @close="closeDrawer">
      <view class="drawer">
        <scroll-view scroll-y="true" class="scroll" :style="{ height: $wanlshop.wanlsys().windowHeight + 'px' }">
          <view class="item solid-bottom" v-if="drawerData.brand.length > 0">
            <view class="title">品牌</view>
            <view class="list">
              <text
                v-for="(bd, index) in drawerData.brand"
                :key="bd.id"
                :class="{ active: bd.choice }"
                data-key="brand"
                :data-attribute="index"
                @tap="onDraver"
              >
                {{ bd.name }}
              </text>
            </view>
          </view>
          <view class="item solid-bottom">
            <view class="title">价格区间</view>
            <view class="from">
              <input type="number" placeholder="最低价" v-model="drawerData.price.low" value="" />
              <text class="">—</text>
              <input type="number" placeholder="最高价" v-model="drawerData.price.high" value="" />
            </view>
          </view>
          <view class="item solid-bottom">
            <view class="title" data-key="city" @tap="onDraverTitle">
              <text>发货地</text>
              <text :class="[drawerType.city ? 'wlIcon-fanhui3' : 'wlIcon-fanhui4']"></text>
            </view>
            <view class="list">
              <text
                class="wlIcon-weizhi"
                data-key="sameCity"
                :class="{ active: drawerData.sameCity.choice }"
                :data-data="drawerData.sameCity.name"
                @tap="onDraver"
              >
                {{ drawerData.sameCity.name }}
              </text>
            </view>
            <view class="title" v-if="drawerType.city"><text>城市</text></view>
            <view class="list" v-if="drawerType.city">
              <text
                v-for="(cy, index) in drawerData.city"
                :key="cy.name"
                :class="{ active: cy.choice }"
                data-key="city"
                :data-attribute="index"
                @tap="onDraver"
              >
                {{ cy.name }}
              </text>
            </view>
          </view>
          <block v-if="drawerData.attribute.length > 0" v-for="(att, index) in drawerData.attribute" :key="att.name">
            <view class="item solid-bottom">
              <view class="title" :data-key="index" @tap="onDraverTitle">
                <text>{{ att.name }}</text>
                <text :class="[drawerData.attribute[index].fold ? 'wlIcon-fanhui3' : 'wlIcon-fanhui4']"></text>
              </view>
              <view class="list" v-if="drawerData.attribute[index].fold">
                <text
                  v-for="(val, key) in att.value"
                  :key="val.name"
                  :data-key="key"
                  :data-attribute="index"
                  :class="{ active: val.choice }"
                  @tap="onDraver"
                >
                  {{ val.name }}
                </text>
              </view>
            </view>
          </block>
        </scroll-view>
        <view class="footer">
          <view>
            <button class="cu-btn bg-gradual-yellow round-left" @tap="onDrawerReset">重置</button>
            <button class="cu-btn bg-gradual-orange round-right" @tap="onDrawerTo">确定</button>
          </view>
        </view>
      </view>
    </uni-drawer>
    <view class="edgeInsetBottom"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      WanlScroll: 0, //记录页面滚动
      scrollStype: false, //滚动状态
      filterIndex: 0, //
      priceOrder: 0, //1 价格从低到高 2价格从高到低
      liststyle: 'col-2-20', //列表样式
      goodsData: [], //商品列表数据
      showRight: false,
      category: '',
      goodsType: 'goods',
      empty: '没有找到任何宝贝',
      pageIndex: 0,
      params: {
        search: '',
        sort: 'weigh',
        order: 'asc',
        page: 1,
        filter: {},
        op: {},
      },
      likeData: [],
      drawerType: {
        attribute: false,
        first: false,
        city: false,
      },
      drawerData: {
        price: {
          low: '',
          high: '',
        },
        brand: [],
        attribute: [],
        sameCity: {
          name: ' 定位中..',
          choice: false,
        },
        city: [
          { name: '北京', choice: false },
          { name: '天津', choice: false },
          { name: '河北', choice: false },
          { name: '山西', choice: false },
          { name: '内蒙古', choice: false },
          { name: '山东', choice: false },
          { name: '江苏', choice: false },
          { name: '上海', choice: false },
          { name: '浙江', choice: false },
          { name: '安徽', choice: false },
          { name: '福建', choice: false },
          { name: '江西', choice: false },
          { name: '河南', choice: false },
          { name: '湖南', choice: false },
          { name: '湖北', choice: false },
          { name: '广东', choice: false },
          { name: '广西', choice: false },
          { name: '海南', choice: false },
          { name: '辽宁', choice: false },
          { name: '吉林', choice: false },
          { name: '黑龙江', choice: false },
          { name: '四川', choice: false },
          { name: '贵州', choice: false },
          { name: '云南', choice: false },
          { name: '重庆', choice: false },
          { name: '宁夏', choice: false },
          { name: '青海', choice: false },
          { name: '陕西', choice: false },
          { name: '甘肃', choice: false },
          { name: '新疆', choice: false },
          { name: '西藏', choice: false },
          { name: '香港', choice: false },
          { name: '澳门', choice: false },
          { name: '台湾', choice: false },
        ],
      },
      drawerParams: {},
      reload: false, //判断是否上拉
      last_page: 0,
      status: 'loading',
      contentText: {
        contentdown: '',
        contentrefresh: '正在加载..',
        contentnomore: '没有更多数据了',
      },
      shopData: [], //商品列表数据
      shopStatus: 'loading',
      shopPage: 1,
      shopAllPage: 0,
    };
  },
  onLoad(option) {
    if (option.type) {
      this.goodsType = option.type;
    }
    if (option.search) {
      //如果搜索存在
      this.params.search = option.search;
      this.drawerParams.search = option.search;
    } else if (option.data) {
      var data = JSON.parse(option.data);
      this.drawerParams.category_id = data.category_id;
      this.category = data.category_name;
      this.params.filter.category_id = data.category_id;
      this.params.op.category_id = 'in';
    } else {
      console.log('调试模式');
    }
    // 加载位置，后续版本开启加载写入全局
    uni.getLocation({
      type: 'wgs84',
      geocode: true,
      success: mres => {
        uni.request({
          url: 'https://restapi.amap.com/v3/geocode/regeo',
          data: {
            key: this.$wanlshop.config('amapkey'),
            location: mres.longitude + ',' + mres.latitude,
          },
          success: res => {
            if (res.statusCode == 200) {
              let address = res.data.regeocode.addressComponent;
              this.drawerData.sameCity.name = address.province;
            }
          },
        });
      },
    });
    this.loadData();
    if (this.goodsData.length == 0) {
      this.loadlikeData();
    }
  },
  // 监听上拉
  onPullDownRefresh() {
    this.reload = true;
    if (this.pageIndex === 0) {
      this.params.page = 1;
      this.loadData();
    } else {
      this.shopPage = 1;
      this.loadShop();
    }
  },
  // 下拉刷新
  onReachBottom() {
    if (this.pageIndex === 0) {
      if (this.params.page >= this.last_page) {
        this.status = 'noMore';
      } else {
        this.reload = false;
        this.contentText.contentdown = '上拉显示更多';
        this.params.page = this.params.page + 1; //页码+1
        this.status = 'loading';
        this.loadData();
      }
    } else {
      if (this.shopPage >= this.shopAllPage) {
        this.shopStatus = 'noMore';
      } else {
        this.reload = false;
        this.contentText.contentdown = '上拉显示更多';
        this.shopPage = this.shopPage + 1; //页码+1
        this.shopStatus = 'loading';
        this.loadShop();
      }
    }
  },
  // 监听滚动
  onPageScroll(object) {
    if (object.scrollTop > this.WanlScroll) {
      this.scrollStype = false;
    } else {
      this.scrollStype = true;
    }
    if (object.scrollTop < 0) {
      this.scrollStype = false;
    }
    this.WanlScroll = object.scrollTop;
  },
  // 监听返回
  onUnload() {
    if (this.showRight) {
      this.closeDrawer();
      return true;
    }
  },
  methods: {
    //异步加载商品列表
    async loadData() {
      this.params.type = this.goodsType;
      this.$api.get({
        url: '/wanlshop/product/lists',
        data: this.params,
        success: res => {
          uni.stopPullDownRefresh();
          this.status = 'more';
          this.goodsData = this.reload ? res.data : this.goodsData.concat(res.data); //数据 追加
          if (res.data.length == 0) {
            this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
          }
          this.params.page = res.current_page; //当前页码
          this.last_page = res.last_page; //总页码
        },
      });
    },
    // 滚动底部加载猜你喜欢
    async loadlikeData() {
      this.$api.get({
        url: `/wanlshop/product/likes?pages=${this.goodsType}`,
        success: res => {
          this.likeData = res.data; //评论数据 追加
        },
      });
    },
    // 加载侧边栏数据
    async loadDrawer() {
      this.drawerParams.type = this.goodsType;
      this.$api.get({
        url: '/wanlshop/product/drawer',
        data: this.drawerParams,
        success: res => {
          var brand = [],
            attribute = [];
          if (res.brand) {
            res.brand.forEach(item => {
              var brandData = {
                id: item.id,
                name: item.name,
                fold: false, // 展开
                choice: false,
              };
              brand.push(brandData);
            });
          }
          if (res.attribute) {
            res.attribute.forEach(item => {
              var value = [];
              item.value.forEach(vo => {
                var valueData = {
                  name: vo.name,
                  choice: false,
                };
                value.push(valueData);
              });
              var attributeData = {
                name: item.name,
                value: value,
                fold: false,
              };
              attribute.push(attributeData);
            });
          }
          this.drawerData.brand = brand;
          this.drawerData.attribute = attribute;
        },
      });
    },
    handleShop(id) {
      this.$wanlshop.to(`/pages/shop/index?id=${id}`);
    },
    handleGoods(id) {
      this.onGoods(id);
    },
    pageSwitch(index) {
      this.pageIndex = index;
      if (this.shopData.length > 0) {
        return;
      }
      this.loadShop();
    },
    loadShop() {
      const params = {};
      params.page = this.shopPage;
      params.keyword = this.params.search;
      this.$api.get({
        url: '/wanlshop/shop/queryShop',
        data: params,
        success: res => {
          uni.stopPullDownRefresh();
          this.shopStatus = 'more';
          this.shopData = this.reload ? res.data : this.shopData.concat(res.data); //数据 追加
          if (res.data.length == 0) {
            this.empty = `没找到与“${params.keyword}"相关的店铺`;
          }
          this.shopPage = res.current_page; //当前页码
          this.shopAllPage = res.last_page; //总页码
        },
      });
    },
    //筛选点击
    tabClick(index) {
      if (this.filterIndex === index && index !== 3) {
        return;
      }
      this.filterIndex = index;
      if (index === 3) {
        this.priceOrder = this.priceOrder === 1 ? 2 : 1;
      } else {
        this.priceOrder = 0;
      }

      // 排序方式
      if (index === 0) {
        this.params.sort = 'weigh';
        this.params.order = 'desc';
      }
      if (index === 1) {
        this.params.sort = 'sales';
        this.params.order = 'desc';
      }
      if (index === 2) {
        this.params.sort = 'createtime';
        this.params.order = 'desc';
      }
      if (index === 3 && this.priceOrder === 1) {
        this.params.sort = 'price';
        this.params.order = 'desc';
      }
      if (index === 3 && this.priceOrder === 2) {
        this.params.sort = 'price';
        this.params.order = 'asc';
      }
      this.status = 'loading';
      this.params.page = 1;
      this.reload = true;
      this.loadData();
      uni.pageScrollTo({
        duration: 300,
        scrollTop: 0,
      });
    },
    // 打开抽屉，并且加载品牌和类目属性
    showDrawer() {
      this.showRight = true;
      if (!this.drawerType.first) {
        this.loadDrawer();
        this.drawerType.first = true;
      }
    },
    // 点击抽屉
    onDraver(e) {
      var index = e.currentTarget.dataset.attribute,
        key = e.currentTarget.dataset.key;
      if (key == 'brand' || key == 'city') {
        // 取消所有选项,选中下面
        this.drawerData[key].forEach((item, keys) => {
          keys != index ? (item.choice = false) : '';
        });
        // 取消同城
        this.drawerData.sameCity.choice = false;
        this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
      } else if (key == 'sameCity') {
        // 取消所有城市选项
        this.drawerData.city.forEach(item => {
          item.choice = false;
        });
        this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
      } else {
        // 取消所有选项,选中下面
        this.drawerData.attribute[index].value.forEach((item, keys) => {
          keys != key ? (item.choice = false) : '';
        });
        this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key].choice;
      }
    },
    // 提交抽屉
    onDrawerTo() {
      // 查询价格
      if (this.drawerData.price.low != '' && this.drawerData.price.high != '') {
        this.params.filter.price = this.drawerData.price.low + ',' + this.drawerData.price.high;
        this.params.op.price = 'BETWEEN';
      } else {
        delete this.params.filter.price;
        delete this.params.op.price;
      }
      // 查询地址
      var cityData = '';
      this.drawerData.city.forEach(item => {
        if (item.choice) {
          cityData = item.name;
        }
      });
      if (cityData) {
        this.params.filter['shop.city'] = '%' + cityData + '%';
        this.params.op['shop.city'] = 'LIKE';
      } else if (this.drawerData.sameCity.choice) {
        this.params.filter['shop.city'] = this.drawerData.sameCity.name;
        this.params.op['shop.city'] = 'LIKE';
      } else {
        delete this.params.filter['shop.city'];
        delete this.params.op['shop.city'];
      }
      // 查询品牌
      var brandData = '';
      this.drawerData.brand.forEach(item => {
        if (item.choice) {
          brandData = item.id;
        }
      });
      if (brandData) {
        this.params.filter.brand_id = brandData;
        this.params.op.brand_id = '=';
      } else {
        delete this.params.filter.brand_id;
        delete this.params.op.brand_id;
      }
      // 查询属性
      var attributeData = [];
      this.drawerData.attribute.forEach((item, index) => {
        // item.name
        item.value.forEach((vo, index) => {
          if (vo.choice) {
            attributeData.push('%' + vo.name + '%');
          }
        });
      });
      // 1.0.8升级 有此项无法查询
      if (attributeData.length > 0) {
        this.params.filter.category_attribute = attributeData.join(',');
        this.params.op.category_attribute = 'LIKE';
      } else {
        delete this.params.filter.category_attribute;
        delete this.params.op.category_attribute;
      }
      this.status = 'loading';
      // 1.0.8升级
      this.goodsData = [];
      this.params.page = 1;
      this.reload = true;
      this.loadData();
      this.closeDrawer();
    },
    // 重置抽屉
    onDrawerReset() {
      this.drawerData.city.forEach(item => {
        item.choice = false;
      });
      this.drawerData.sameCity.choice = false;
      this.loadDrawer();
    },
    // 点击抽屉标题
    onDraverTitle(e) {
      var stype = e.currentTarget.dataset.key;
      if (stype === 'city') {
        this.drawerType[stype] = !this.drawerType[stype];
      } else {
        this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
      }
    },
    // 关闭抽屉
    closeDrawer() {
      this.showRight = false;
    },
    search() {
      this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, 'fade-in', 100);
    },
    editListstyle() {
      this.liststyle = this.liststyle == 'col-1-10' ? 'col-2-20' : 'col-1-10';
    },
  },
};
</script>

<style lang="scss">
.cu-custom .search-form {
  border: 3rpx solid #fe6600;
  background-color: #fff;
}
.cu-tag:not([class*='bg']):not([class*='line']) {
  background-color: #f7f7f7;
}
.shop {
  background: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx 24rpx 0;
  box-sizing: border-box;
  padding: 20rpx 12rpx 28rpx;
  &__info {
    display: flex;
    justify-content: space-between;
    &__middle {
      flex-grow: 1;
      margin-left: 20rpx;
    }
    &__name {
      color: #5a5a5a;
      line-height: 40rpx;
      font-weight: 500;
      font-size: 28rpx;
      display: flex;
      margin-top: 8rpx;
      align-items: center;
    }
    &__type {
      background: linear-gradient(90deg, #efc618 0%, #ff5d5d 100%);
      border-radius: 6rpx;
      height: 36rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 22rpx;
      font-size: 22rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 4rpx;
      margin-left: 12rpx;
    }
    &__fans {
      font-weight: 500;
      color: #b4b4b5;
      line-height: 32rpx;
      font-size: 22rpx;
      margin-top: 8rpx;
    }
    &__avatar {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
    }
  }
  &__enter {
    width: 94rpx;
    height: 42rpx;
    background: #e61d1b;
    border-radius: 21rpx;
    color: #ffffff;
    font-weight: 500;
    font-size: 28rpx;
    text-align: center;
    margin-top: 8rpx;
  }
  &__images {
    display: flex;
    margin-top: 24rpx;
  }
  &__goods {
    height: 220rpx;
    width: 220rpx;
    position: relative;
    &__image {
      height: 220rpx;
      width: 220rpx;
      display: block;
      background: #ffffff;
      border-radius: 12rpx;
    }
    &:not(:first-child) {
      margin-left: 8rpx;
    }
    &__price {
      position: absolute;
      right: 4rpx;
      bottom: 4rpx;
      height: 36rpx;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 18rpx;
      font-size: 24rpx;
      padding: 4rpx 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
